<template>
  <view class="search-history" v-if="searchList.length">
    <view class="history-title">
      <text>{{$t('home.history')}}</text>
      <image
        :src="asyncImgs.images.search_delete_icon"
        @click="clearHistory"
        mode="aspectFit"
      />
    </view>
    <view class="history-list">
      <view
        v-for="(item, index) in searchList"
        :key="index"
        class="list-item text-more-1"
        @click="handleSearchHistory(item)"
        >{{ item.keyword }}</view
      >
    </view> </view
  > 
</template>

<script>
export default {
  props: {
    searchList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {
    clearHistory() {
      this.$emit("clearHistory");
    },
    handleSearchHistory(item) {
      this.$emit("handleSearchHistory", { item: item.keyword });
    },
  },
};
</script>

<style scoped lang="scss">
.search-history {
  width: 678rpx;
  margin: 40rpx auto 0;
  .history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #262626;
    }
    image {
      width: 28rpx;
      height: 28rpx;
      display: block;
    }
  }
  .history-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 0 0rpx 0;
    .list-item {
      width: initial;
      max-width: 300rpx; 
      height: 60rpx;
      background: #f2f2f2;
      border-radius: 30rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #262626;
      line-height: 60rpx;
      text-align: center;
      padding: 0 25rpx;
      margin: 12rpx;
    }
    .list-item:first-child {
      margin-left: 0;
    }
  }
}
</style>
